<template>
	<view>
		<view style="text-align: center; padding: 20px 0; color: #666666;" v-if="!!title">
			{{title}}
		</view>
		<view class="weeks">
			<template v-for="item in weeks">
				<view :key="item.value"
					class="weeks-item"
					:style="{background:item.checked?(theme_color.value) ? theme_color.value.default : '#FF0025':'#BBBBBB'}"
					@tap="tapWeek(item)"
				>
				{{item.text}}
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:''
			},
			value:{
				type:Array,
				default:[]
			}
		},
		data(){
			return {
				weeks:[],
				selectedWeeks:[],
				theme_color:{}
			}
		},
		beforeCreate() {
			// console.log('j-week:beforeCreate:');
		},
		created() {
			// console.log('j-week:created:');
			if (uni.getStorageSync("theme_color")) {
				this.theme_color = JSON.parse(uni.getStorageSync("theme_color"));
			}
		},
		beforeMount() {
			// console.log('j-week:beforeMount:');
		},
		mounted() {
			// console.log('j-week:mounted:');
			this.weeks = [
				{text: '周日',value:0,checked:false},
				{text: '周一',value:1,checked:false},
				{text: '周二',value:2,checked:false},
				{text: '周三',value:3,checked:false},
				{text: '周四',value:4,checked:false},
				{text: '周五',value:5,checked:false},
				{text: '周六',value:6,checked:false}
			]
			this.selectedWeeks = this.value
			this.initWeek()
		},
		beforeUpdate() {
			// console.log('j-week:beforeUpdate:');
		},
		updated() {
			// console.log('j-week:updated:');
			
		},
		beforeDestroy() {
			// console.log('j-week:beforeDestroy:');
		},
		destroyed() {
			// console.log('j-week:destroyed:');
		},
		methods:{
			// 初始化week
			initWeek(){
				this.weeks.forEach(item => {
					this.selectedWeeks.forEach(pro => {
						if(item.value === pro){
							item.checked = true
						}
					})
				})
			},
			//修改week样式
			tapWeek(item){
				item.checked = !item.checked
				if(item.checked){
					if(this.selectedWeeks.indexOf(item.value) === -1){
						this.selectedWeeks.push(item.value)
					}
				}else{
					let index = this.selectedWeeks.indexOf(item.value)
					if(index !== -1){
						this.selectedWeeks.splice(index,1)
					}
				}
				this.$emit('change',this.selectedWeeks)
			},
		}
	}
</script>

<style>
	.weeks {
	    display: flex;
	    justify-content: space-evenly;
	    align-items: center;
	    margin-bottom: 20px;
	}
	.weeks-item {
	    width: 36px;
	    height: 36px;
	    border-radius: 100%;
		background: #BBBBBB;
	    text-align: center;
	    line-height: 36px;
	    font-size: 12px;
	    color: #FFFFFF;
	}
	.weeks-item.selected {
	    background: #FF0025;
	}
</style>